$(function() {
	renderPDchart('chart1')
	$('.nodeInfo').on('click','.close',function(){
		$('.nodeInfo').hide()
	})
	
	$('.container .content header .center h2').click(function(){
		$(this).addClass('active')
		$(this).siblings().removeClass('active')
		if($(this).text().indexOf('知识图谱')>-1){
			renderPDchart('chart1')
		}else{
			renderPD1chart('chart1')
		}
	})
})



function renderPDchart(id) {
	const chart = echarts.init(document.getElementById(id));
	chart.clear();
	const colors = [
		"#F754A8",
		"#F7BA1E",
		"#9FDB1D",
		"#722ED1",
		"#F77234",
		"#30C9C9",
		"#165DFF"
	]
	const _data = [{
		name: "项目名称",
		time:'2023/10/21 - 2024/11/11',
		value: 0,
		children: [{
				name: '项目组',
				value: '1',
				children: [{
						name: '人员',
						value: '1-1',
						children:[
							{
								name: '张三',
								value: '1-1-1',
								showInfo:true
							},
							{
								name: '李四',
								value: '1-1-2',
								showInfo:true
							},
							{
								name: '王武',
								value: '1-1-3',
								showInfo:true
							}
						]
					},
					{
						name: '总工时：40h',
						value: '1-2'
					}
				]
			},
			{
				name: '合同',
				value: '2',
				children: [{
						name: '收款合同',
						figure: '3000',
						value: '2-1',
						children:[
							{
								name:'合同1',
								value:'2-1-1',
								showInfo:true
							},
							{
								name:'合同2',
								value:'2-1-2',
								showInfo:true
							},
							{
								name:'合同3',
								value:'2-1-3',
								showInfo:true
							},
							{
								name:'合同4',
								value:'2-1-4',
								showInfo:true
							}
						]
					},
					{
						name: '付款合同',
						figure: '2000',
						value: '2-2',
						children:[
							{
								name:'合同1',
								value:'2-2-1',
								showInfo:true
							},
							{
								name:'合同2',
								value:'2-2-2',
								showInfo:true
							},
							{
								name:'合同3',
								value:'2-2-3',
								showInfo:true
							},
							{
								name:'合同4',
								value:'2-2-4',
								showInfo:true
							}
						]
					}
				]
			},
			{
				name: '计划',
				value: '3',
				children: [
					{
						name:'计划一',
						value:'3-1',
						children:[
							{
									name: '任务',
									value: '3-1-1'
								},
								{
									name: '计划开始时间',
									value: '3-1-2'
								},
								{
									name: '计划完成时间',
									value: '3-1-3'
								},
								{
									name: '计划支出',
									value: '3-1-4'
								}
						]
					},
					{
						name:'计划二',
						value:'3-2',
						children:[
							{
									name: '任务',
									value: '3-2-1'
								},
								{
									name: '计划开始时间',
									value: '3-2-2'
								},
								{
									name: '计划完成时间',
									value: '3-2-3'
								},
								{
									name: '计划支出',
									value: '3-2-4'
								}
						]
					}
				]
			},
			{
				name: '预算',
				value: '4',
				children: [{
						name: '年度预算',
						value: '4-1',
						children: [{
								name: '2021',
								value: '4-1-1'
							},
							{
								name: '2022',
								value: '4-1-2'
							},
							{
								name: '2023',
								value: '4-1-3'
							}
						]
					}

				]
			},
			{
				name: '成本',
				value: '5',
				children: [{
						name: '直接成本',
						value: '5-1',
						showInfo:true
					},
					{
						name: '间接成本',
						value: '5-2',
						showInfo:true
					}
				]
			},
			{
				name: '计提收益：22033万元',
				value: '6'
			},
			{
				name: '余额：22033万元',
				value: '7',
			}
		]
	}]
	const handle = function handleData(data, index, color = '#DAD9EF') {
		//index标识第几层
		return data.map((item, index2) => {
			//计算出颜色
			if (index == 1) {
				color = colors.find((item, eq) => eq == index2 % 10);
			}
			
			// 设置线条颜色
			item.lineStyle = {
				color: color
			}
			
			if (index === 0) {
				item.label = {
					...item.label,
					position: 'inside',
					width: 240,
					height:240,
					backgroundColor: {
						image: "assets/images/newindex/bg@2x.png",
					},
					formatter: (params)=>{
						return [
							`{name|${params.data.name}}`,
							`{time|${params.data.time}}`
						].join('\n')
					},
					align: 'center',
					rich: {
						name: {
							color: '#1D2129',
							fontSize: 24,
							height: 32,
							fontWeight: 600,
							padding:[65,0,0,0]
						},
						time: {
							color: '#4E5969',
							fontSize: 10,
							height: 18,
						}
					}
				}
			}else{
				item.label = {
					position: ['-80%', '180%'],
					backgroundColor:"#fff",
					padding:[3,10,3,10],
					lineHeight:22,
					borderRadius:30
				}
			}
			if (item.children) { //存在子节点
				item.itemStyle = {
					borderColor: color,
					color: color
				};
				item.children = handle(item.children, index + 1, color)
			}else{
				item.itemStyle = {
					borderColor: color,
					color: color
				};
			}
			return item
		})
	}
	const data = handle(_data, 0)
	const option = {
		type: "tree",
		tooltip: { //提示框
			trigger: "item",
			triggerOn: "mousemove",
			backgroundColor: "transparent",
			borderWidth: 0,
			padding: 0,
			formatter: function(params) {
				if(params.value !==0){
					return `<div class="chartFormart">
					<p style="color: #1D2129;font-size: 12px;font-weight: 600;">${params.name}</p>
					</div>`
				}
			},
		},
		series: [{
			type: "tree",
			hoverAnimation: true, //hover样式
			data: data,
			top: 0,
			bottom: 40,
			left: 0,
			right: 0,
			layout: "radial",
			symbol: "circle",
			symbolSize: 20,
			nodePadding: 20,
			animationDurationUpdate: 750,
			expandAndCollapse: true, //子树折叠和展开的交互，默认打开
			initialTreeDepth: 2,
			roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
			focusNodeAdjacency: true,
			label: { //标签样式
				color: '#1D2129',
				fontSize: '14px',
				fontFamily: "SourceHanSansCN",
				rotate: 0,
			},
			lineStyle: {
				width: 1,
				curveness: 0,
			}
		}]
	}
	chart.setOption(option);
	chart.on('click', function(params) {
		if(params.data.showInfo&&!params.data.children && params.data.value!=='6'&&params.data.value!=='7'&&params.data.value!=='1-2'){
			$('.nodeInfo').html(`<img class="close" src="assets/images/mask/close.png">
			<div class="info">
				<div class="">
					<h3>${params.data.name}</h3>
					<p>001102020202</p>
				</div>
			</div>
			<div class="item">
				<h4>所属部门：技术部</h4>
			</div>
			<div class="item">
				<h4>职位：工程师</h4>
			</div>`)
			$('.nodeInfo').show()
		}
		
	});
	window.addEventListener("resize", function() {
		chart.resize();
	});

}
function renderPD1chart(id) {
	let chart = echarts.init(document.getElementById(id));
	chart.clear();
	const _data = [{
		name: "项目名称",
		time:'2023/10/21 - 2024/11/11',
		value: '0',
		children: [{
				name: '项目组',
				value: '1',
				children: [{
						name: '人员',
						value: '1-1',
						children:[
							{
								name: '张三',
								value: '1-1-1',
								children:[
									{
										name:'员工编号：001102020202',
										value: '1-1-1-1',
									},
									{
										name:'所属部门：技术部',
										value: '1-1-1-2',
									},
									{
										name:'职位：工程师',
										value: '1-1-1-3',
									}
								]
							},
							{
								name: '李四',
								value: '1-1-2',
								children:[
									{
										name:'员工编号：0013034',
										value: '1-1-2-1',
									},
									{
										name:'所属部门：技术部',
										value: '1-1-2-2',
									},
									{
										name:'职位：工程师',
										value: '1-1-2-3',
									}
								]
							},
							{
								name: '王武',
								value: '1-1-3',
								children:[
									{
										name:'员工编号：032001',
										value: '1-1-3-1',
									},
									{
										name:'所属部门：技术部',
										value: '1-1-3-2',
									},
									{
										name:'职位：工程师',
										value: '1-1-3-3',
									}
								]
							}
						]
					},
					{
						name: '总工时：40h',
						value: '1-2'
					}
				]
			},
			{
				name: '合同',
				value: '2',
				children: [{
						name: '收款合同',
						figure: '3000',
						value: '2-1',
						children:[
							{
								name:'合同1',
								value:'2-1-1',
								children:[
									{
										name:'合同编号：001'
									},
									{
										name:'合同名称：收款合同1'
									},
									{
										name:'合同总金额：2000031'
									},
									{
										name:'所属项目：001'
									},
									{
										name:'签订日期：2023-03-02'
									},
									{
										name:'签订部门：财务部门'
									},
									{
										name:'签订单位：院级'
									},
									{
										name:'结束日期：2024-03-01'
									},
									{
										name:'已付总金额：29483'
									},
									{
										name:'已收票金额：2334'
									}
								]
							},
							{
								name:'合同2',
								value:'2-1-2',
								children:[
									{
										name:'合同编号：002'
									},
									{
										name:'合同名称：收款合同2'
									},
									{
										name:'合同总金额：2000031'
									},
									{
										name:'所属项目：001'
									},
									{
										name:'签订日期：2023-03-02'
									},
									{
										name:'签订部门：财务部门'
									},
									{
										name:'签订单位：院级'
									},
									{
										name:'结束日期：2024-03-01'
									},
									{
										name:'已付总金额：29483'
									},
									{
										name:'已收票金额：2334'
									}
								]
							}
						]
					},
					{
						name: '付款合同',
						figure: '2000',
						value: '2-2',
						children:[
							{
								name:'合同1',
								value:'2-2-1',
								children:[
									{
										name:'合同编号：001'
									},
									{
										name:'合同名称：付款合同1'
									},
									{
										name:'合同总金额：2000031'
									},
									{
										name:'收款总金额：22112'
									},
									{
										name:'签订日期：2023-03-02'
									},
									{
										name:'签订部门：财务部门'
									},
									{
										name:'签订单位：院级'
									},
									{
										name:'结束日期：2024-03-01'
									},
									{
										name:'所属项目：001'
									},
									{
										name:'付款方名称：公司名称'
									}
								]
							},
							{
								name:'合同2',
								value:'2-2-2',
								children:[
									{
										name:'合同编号：002'
									},
									{
										name:'合同名称：付款合同2'
									},
									{
										name:'合同总金额：2000031'
									},
									{
										name:'收款总金额：22112'
									},
									{
										name:'签订日期：2023-03-02'
									},
									{
										name:'签订部门：财务部门'
									},
									{
										name:'签订单位：院级'
									},
									{
										name:'结束日期：2024-03-01'
									},
									{
										name:'所属项目：001'
									},
									{
										name:'付款方名称：公司名称'
									}
								]
							}
						]
					}
				]
			},
			{
				name: '计划',
				value: '3',
				children: [
					{
						name:'计划一',
						value:'3-1',
						children:[
							{
									name: '任务',
									value: '3-1-1'
								},
								{
									name: '计划开始时间',
									value: '3-1-2'
								},
								{
									name: '计划完成时间',
									value: '3-1-3'
								},
								{
									name: '计划支出',
									value: '3-1-4'
								}
						]
					},
					{
						name:'计划二',
						value:'3-2',
						children:[
							{
									name: '任务',
									value: '3-2-1'
								},
								{
									name: '计划开始时间',
									value: '3-2-2'
								},
								{
									name: '计划完成时间',
									value: '3-2-3'
								},
								{
									name: '计划支出',
									value: '3-2-4'
								}
						]
					}
				]
			},
			{
				name: '预算',
				value: '4',
				children: [{
						name: '年度预算',
						value: '4-1',
						children: [{
								name: '2021',
								value: '4-1-1'
							},
							{
								name: '2022',
								value: '4-1-2'
							},
							{
								name: '2023',
								value: '4-1-3'
							}
						]
					}

				]
			},
			{
				name: '成本',
				value: '5',
				children: [{
						name: '直接成本',
						value: '5-1'
					},
					{
						name: '间接成本',
						value: '5-2'
					}
				]
			},
			{
				name: '计提收益：22033万元',
				value: '6'
			},
			{
				name: '余额：22033万元',
				value: '7',
			}
		]
	}]
	have(id) ? dimensionRelation(id, _data) : "";

}
